import { reactive, ref } from 'vue'
import { getCodeApi, loginWithPasswordApi, loginWithCodeApi, getUserInfoApi } from '@/api/user'
import { type FormInstance, type FormRules } from 'element-plus'
import { type Result } from '@/types/result'
import VueClipboard from 'vue-clipboard3'
// 导入pinia的useUserStore
import { useUserStore } from '@/stores'
// 定义表单数据接口
interface LoginForm {
  phone: string
  code?: string
  password?: string
}

export default function () {
  // 播放提示音
  const audio = new Audio('/audio/livechat-129007.mp3')
  // 使用VueClipboard
  const { toClipboard } = VueClipboard()
  // 使用useUserStore
  const userStore = useUserStore()
  // 加载状态
  const loading = ref<boolean>(true)
  // 表单数据
  const loginForm = reactive<LoginForm>({
    phone: '',
    code: '',
    password: '',
  })
  // 状态标记
  const state = reactive({
    // 是否发送验证码
    codeSent: false,
    // 倒计时
    countdown: 0,
    // 是否登录成功
    loggedIn: false,
  })
  // 清空 loginForm 方法
  const clearLoginForm = () => {
    loginForm.phone = ''
    loginForm.code = ''
    loginForm.password = ''
  }

  // 发送验证码的方法
  const sendCode = async (formEl: FormInstance | undefined) => {
    // 检查是否已发送过验证码
    if (state.codeSent) {
      ElMessage.warning('验证码已发送，请稍后再试')
      return
    }

    // 校验手机号字段
    if (!formEl) return
    try {
      await formEl.validateField('phone') // 仅校验手机号字段
    } catch (error) {
      console.error(error)
      ElMessage.error('请检查手机号是否正确')
      return
    }

    try {
      // 调用接口发送验证码
      const res = await getCodeApi(loginForm.phone)
      // 判断接口返回结果
      if (res.code === 0) {
        ElMessage.success('验证码发送成功，请注意查收')
        state.codeSent = true
        state.countdown = 60

        // 启动倒计时
        const timer = setInterval(() => {
          state.countdown -= 1
          if (state.countdown <= 0) {
            clearInterval(timer)
            state.codeSent = false
          }
        }, 1000)

        // 显示验证码通知（可根据需求延时显示）
        const delay = Math.floor(Math.random() * 3000) + 2000 // 生成 2000~5000 毫秒之间的随机数
        setTimeout(() => {
          audio.play()
          ElNotification({
            title: '请注意查收验证码:',
            message: `
                      <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--theme-blue-color);font-weight:600;font-size:16px">${res.data}</span>
                        <button
                          id="copy-code-btn"
                          style="height:30px;width:60px;border-radius:15px;
                                background: rgba(var(--theme-color-rgb), 0.1);font-weight:600;
                                color: var(--theme-color);cursor: pointer;border:none;
                                transition: transform 0.3s ease;"
                          onmouseover="this.style.transform='scale(1.05)'"
                          onmouseout="this.style.transform='scale(1)'">
                          复制
                        </button>
                      </div>`,
            type: 'success',
            dangerouslyUseHTMLString: true,
            onClose: () => {
              // 移除事件监听器
              const copyBtn = document.getElementById('copy-code-btn')
              if (copyBtn) copyBtn.removeEventListener('click', copyCode)
            },
          })

          // 添加事件监听器
          const copyCode = () => copyToClipboard(res.data)
          const copyBtn = document.getElementById('copy-code-btn')
          if (copyBtn) copyBtn.addEventListener('click', copyCode)
        }, delay)
      } else {
        ElMessage.error('验证码发送失败，请稍后重试')
      }
    } catch (error) {
      console.error(error)
      // 捕获请求失败的情况并显示错误提示
      ElMessage.error('验证码请求失败，请稍后重试')
    } finally {
      // 关闭加载动画
    }
  }

  // 校验手机号的规则
  const validatePhone = (rule: any, value: any, callback: any) => {
    // 非空校验
    if (value === '') {
      callback(new Error('手机号不能为空'))
    } else if (!/^\d{11}$/.test(value)) {
      // 格式校验：必须是11位数字
      callback(new Error('手机号格式不正确，请输入11位有效数字'))
    } else if (!/^1[3-9]\d{9}$/.test(value)) {
      // 有效性校验：以1开头，第二位为3-9之间的数字
      callback(new Error('手机号无效，请检查后重新输入'))
    } else {
      callback() // 校验通过
    }
  }

  // 校验密码的规则
  const validatePassword = (rule: any, value: any, callback: any) => {
    // 非空校验
    if (value === '') {
      callback(new Error('密码不能为空'))
    } else if (value.length < 6 || value.length > 20) {
      // 长度校验：8-20位
      callback(new Error('密码长度应为6到20个字符'))
    } else if (!/(?=.*[a-zA-Z])/.test(value)) {
      // 至少一个字母
      callback(new Error('密码需包含至少一个字母'))
    } else if (!/(?=.*\d)/.test(value)) {
      // 至少一个数字
      callback(new Error('密码需包含至少一个数字'))
    } else {
      callback() // 校验通过
    }
  }

  // 校验验证码的规则
  const validateCode = (rule: any, value: any, callback: any) => {
    // 非空校验
    if (value === '') {
      callback(new Error('验证码不能为空'))
    } else if (value.length !== 6) {
      // 长度校验：6位
      callback(new Error('验证码长度应为6个字符'))
    } else {
      callback()
    }
  }

  // 表单校验规则
  const rules = reactive<FormRules<typeof loginForm>>({
    phone: [{ validator: validatePhone, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    code: [{ validator: validateCode, trigger: 'blur' }],
  })

  // 通用登录方法
  const login = async (formEl: FormInstance | undefined) => {
    // 表单校验
    if (!formEl) return
    await formEl.validate()
    try {
      let result: Result
      if (loginForm.password !== '') {
        // 密码登录
        result = await loginWithPasswordApi(loginForm.phone, loginForm.password as string)
      } else {
        // 验证码登录
        result = await loginWithCodeApi(loginForm.phone, loginForm.code as string)
      }

      if (result.code === 0) {
        ElMessage.success('登录成功')
        // 执行登录成功后的操作，如存储 token 等
        userStore.setToken(result.data)
        // 调用 getUserInfoApi 获取用户信息
        const res = await getUserInfoApi()
        if (res.code === 0) {
          // 确保获取用户信息成功后，再设置用户信息
          userStore.setUser(res.data)
        }

        // 清空表单
        clearLoginForm()
        // 更改登录状态
        state.loggedIn = true
        window.location.reload() // 页面刷新
      } else {
        ElMessage.error(result.msg || '登录失败')
      }
    } catch (error) {
      console.error(error)
      ElMessage.error('登录失败，请稍后重试')
    }
  }

  // 复制到剪贴板
  const copyToClipboard = async (text: string) => {
    try {
      await toClipboard(text)
      ElMessage({
        type: 'success',
        message: '复制成功!',
      })
    } catch (error) {
      console.error(error)
      ElMessage({
        type: 'error',
        message: '复制失败!',
      })
    }
  }

  return {
    loginForm,
    sendCode,
    clearLoginForm,
    login,
    copyToClipboard,
    state,
    rules,
    loading,
  }
}
